<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">考勤记录</block>
		</cu-custom>
		<MeScroll :up="up" :down="down" @up="upFn" :fixed="false" @down="downFn" @init="initMeScroll">
			<!-- <view class="item" v-for="(item,index) in list" :key="index">{{index+1}}</view> -->
			<view class="cu-form-group">
				<view class="title">员工姓名</view>
			<uni-combox :candidates="candidates" placeholder="请选择或输入员工" @input="queryEmployee" emptyTips="无该员工请重新选择或输入" v-model="employeeName"></uni-combox>
			</view>
			<view class="basement">
				<view class="top">
					<view class="name_nav">
						<text class="name_r">{{annotation.fullName?annotation.fullName.slice(0, 1):''}}</text>
						<text class="name">{{annotation.fullName}}</text>
						{{annotation.isResign=='N'?'在职':'离职'}}
					</view>
					<view class="data_msg">
						<text>考勤天数</text>
						<text @tap="selectorVisible=false">
							<view class="cgray search_select">
								<text>{{annotation.attendanceDays}}天</text>
								<uni-icons color="gray" type="arrowdown" class="down_icon"></uni-icons>
							</view>
						</text>
					</view>
					<view class="kaoqing_msg">
						<view class="">
							<text style="color: #ff5500;">￥:{{annotation.salaryPayable}}元</text>
							<view class="">应发工资</view>
						</view>
						<view class="">
							<text style="color: #ff5500;">￥:{{annotation.paidWages}}元</text>
							<view class="">已付工资</view>
						</view>
						<view class="">
							<text style="color: #f11;">￥:{{annotation.netSalary}}元</text>
							<view class="">实发工资</view>
						</view>
					</view>
				</view>
			
				<view class="record">
					<view class="record_title">考勤记录</view>
					<view class="">
						<text class="red_icon">*</text>本月：
						<text>{{zhouqi1}} 至 {{zhouqi2}}</text>
					</view>
					<view class="">
						<text class="red_icon">*</text>{{month.year}}年{{month.month}}月工天：
						<text>{{tuli}}天</text>
					</view>
				</view>
				<view class="calendar">
					<tale-calendar
					name="calendar"
					bgColor="#4198f8"
					selColor="#4198f8"
					textColor="#4198f8"
					:showText="true"
					:showDot="true"
					:extraData="extraData"
					@calendarTap="calendarTap"
					@monthTap="monthTap"/>
				</view>
				<view class="foot">
					友情提示：每月3号后无法清除上月异常考勤
				</view>
			</view>
			<w-picker
				:visible.sync="selectorVisible"
				mode="selector"
				:value="defaultValue"
				default-type="name"
				:default-props="defaultProps"
				:options="selectorList"
				@confirm="onConfirm($event,'selector')"
				@cancel="onCancel"
				ref="selector" 
			></w-picker>
		</MeScroll>
		<view class="tabbar_bottom">
			<view class="footer">
				<view @tap="overtimeForm" class="btn">
					<text>加班记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {formateDates,getCurrentMonthFirst,getCurrentMonthLast} from "@/common/util.js"
	import MeScroll from '../../components/mescroll-uni/mescroll-uni.vue'
	import taleCalendar from '@/components/tale-calendar/calendar.vue'
	
	export default {
		components:{
			MeScroll,taleCalendar
		},
		props: {
			type: Number,
			i: Number
		},
		data() {
			return {
				employeeName:'',
				candidates: [],
				kqz:"IT研发部",
				url:"/oa/oaEmployeeInfo/list?column=createTime&order=desc",
				time:'2021年06月',
				selectorVisible:'false',
				zhouqi1:getCurrentMonthFirst(),
				zhouqi2:getCurrentMonthLast(),
				tuli:0,
				extraData: [],
				total: 30,
				annotation:{},
				attendanceTime:'',
				month:{},
				isInit: false, // 是否初始化
				list: [], // 列表数据
				meScroll: null, // meScroll 对象
				selectorVisible:false,
				defaultValue:'一天',
				result:{
					result:"一天"
				},
				defaultProps:{
					label:"name",
					value:"id"
				},
				selectorList:[
					{
						name:"一天",
						id:"1"
					},{
						name:"半天",
						id:"0.5"
					}
				],
				// 上拉配置参数
				up: {
					auto: false,
					page: {
						page: 0,
						size: 10
					}
				},
				// 下拉配置参数
				down: {
					auto: false
				}
			}
		},
		
		watch:{
			type(val) {
				if(!this.isInit && val === this.i) {
					this.meScroll.resetUpScroll()
				}
			}
		},
		
		mounted() {
			if(!this.isInit && this.i === 0) {
				this.meScroll.resetUpScroll()
			}
		},
		
		onLoad() {
			const annItem=this.$Route.query
			// this.model = query;
			console.log("ann",annItem)
			this.annotation = annItem
			let date = new Date();
			var year = date.getFullYear();
			var month = parseInt(date.getMonth());
			this.monthTap({year,month})
		},
		methods: {
			queryEmployee(){
				//联网加载数据
				let licensePlateNo;
				if(this.employeeName){
					licensePlateNo='*'+this.employeeName+'*'
				}
				this.candidates=[]
				this.$http.get(this.url,{params:{fullName:licensePlateNo}}).then(res=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.announcement1 = res.data.result.records
					// this.mescroll.endSuccess(this.announcement1.length);
					//console.log("url", res)
					//设置列表数据
					  if (res.data.success) {
						for(let annItem of this.announcement1){
							this.annotation=annItem
							this.candidates.push(annItem.fullName)							
						}
						let date = new Date();
						var year = date.getFullYear();
						var month = parseInt(date.getMonth());
						this.monthTap({year,month})
					 }
					
				}).catch(()=>{
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			onCancel(){
					
			},
			onConfirm(res,type){
				this.result=res;
				let that = this;
				console.log(res)
				this.$http.post('/oa/oaEmployeeInfo/addOaAttendanceRecord',{employeeInfoId: this.annotation.id,attendanceTime:this.attendanceTime,workingDay:res.value}).then(res2=>{
					//设置列表数据
					  if (res2.data.success) {
						  let date= that.attendanceTime
						  let attendanceDays = that.annotation.attendanceDays+parseFloat(res.value);
						  that.annotation.attendanceDays=attendanceDays;
						  that.annotation.salaryPayable = that.annotation.salaryPayable+that.annotation.basicSalary*parseFloat(res.value);
						  // that.annotation.salaryPayable = that.annotation.basicSalary*attendanceDays;
						  if(that.annotation.paidWages){
							  that.annotation.netSalary=that.annotation.salaryPayable-that.annotation.paidWages;
						  }else{
							that.annotation.netSalary=that.annotation.salaryPayable;
						  }
						  that.tuli=that.tuli+parseFloat(res.value);
						  let value=res.value+'天'
						  let dot=true
						  let active=true
						  that.extraData.push({date,value,dot,active})
						this.$tip.success(res2.data.message);
					 }else{
						 this.$tip.error(res2.data.message);
					 }
				}).catch(()=>{
					//联网失败, 结束加载
					// this.mescroll.endErr();
				})
			},
			/**
			 * mescroll 初始化组件
			 * */ 
			initMeScroll(meScroll) {
				this.meScroll = meScroll
			},
			
			/**
			 * 上拉回调
			 * */
			upFn(meScroll) {
				setTimeout(() => {
					let arr = [1,1,1,1,1,1,1,1,1,1]
					this.list = [...this.list,...arr]
						meScroll.endBySize(arr.length, this.total)
				}, 1000)
			},
			
			/**
			 * 下拉回调
			 * */
			downFn(meScroll) {
				this.list = []
				meScroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			calendarTap(e) {
				
				console.log(e);
				let {year, month, day, value} = e;
				month+=1;
				this.attendanceTime=year+"-"+month+"-"+day
                console.log({year, month, day, value});
				this.selectorVisible=true;
				this.defaultValue=value
            },
            monthTap(val) {
				console.log("monthTap====",val)
                let {year, month} = val;
				month+=1;
				if(month<10){
					month="0"+month
				}
				let that = this;
				that.extraData=[]
                this.month = {
                    year: year,
                    month: month,
                }
				console.log("5555555555555555")
				that.tuli=0
				if(this.annotation.id){
					this.$http.get('/oa/oaEmployeeInfo/listOaAttendanceRecordByMainId',{params:{employeeInfoId: this.annotation.id,attendanceTime_begin:year+'-'+month+'-01',attendanceTime_end:year+'-'+month+'-31',pageSize:31}}).then(res=>{
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						let announcement1 = res.data.result.records
						// this.mescroll.endSuccess(this.announcement1.length);
						//console.log("url", res)
						//设置列表数据
						  if (res.data.success) {
							 console.log("res",res.data)
							for(let annItem of announcement1){
								annItem.date=annItem.attendanceTime;
								that.tuli=that.tuli+annItem.workingDay
								annItem.value=annItem.workingDay+'天'
								annItem.dot=true
								annItem.active=true
								that.extraData.push(annItem)							
							}
						 }
						
					}).catch(()=>{
						//联网失败, 结束加载
						// this.mescroll.endErr();
					})
				}
				
            },
			overtimeForm(){
				console.log("加班记录")
				this.$Router.push({name:'overtime', params:this.annotation})
			},
		}
	}
</script>

<style>
	.basement {
		background-color: #eee;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}
	
	.item {
		box-sizing: border-box;
		height: 200upx;
		width: 100%;
		margin-bottom: 10px;
		background: #ccc;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.top {
		padding: 10upx 20upx;
		margin-bottom: 20upx;
		background-color: #fff;
		border-radius:0 0 40upx 40upx;
	}
	.name_nav {
		color:#999
	}
	.name {
		color: #000000;
		margin: 0 30upx;
	}
	.name_r {
		display: inline-block;
		width: 80upx;
		height: 80upx;
		color: #fff;
		font-size: 36upx;
		text-align: center;
		line-height: 80upx;
		background-color: #33a0d8;
		border-radius: 50%;
	}
	.data_msg {
		background-color: #fff;
		display: flex;
		color: #000000;
		font-size: 30upx;
		justify-content: space-around;
	}	
	.kaoqing_msg {
		display: flex;
		color: #999999;
		text-align: center;
		justify-content: space-around;
	}
	
	.record,.foot {
		background-color: #fff;
		padding: 10upx 20upx;
	}
	.record_title {
		font-size: 32upx;
		margin-bottom: 8upx;
	}
	.red_icon {
		margin: 4upx;
		color: #f11;
	}
	.calendar {
		background-color: #fff;
	}
	
	.foot{
		color:#888
	}
	.tabbar_bottom {
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    height: 54px;
		width: 100%;
	    background: #FFFFFF;
	    padding-left: 15px;
	    padding-right: 15px;
	    padding-bottom: 8px;
	    padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
	    box-sizing: content-box;
	    border-top: 0.5px solid #efefef;
	    z-index: 101;
	}
	.tabbar_bottom .footer {
	    padding: 8px 15px;
	    display: flex;
	}
	.tabbar_bottom .footer .btn {
	    width: 80px;
	    height: 40px;
	    border-radius: 5px;
	    line-height: 40px;
	    text-align: center;
	    font-size: 15px;
	    color: #fff;
	    background: blue;
	    margin: 0 2px;
	}
	.example-body {
			padding: 12px;
			background-color: #FFFFFF;
		}
	
		.result-box {
			text-align: center;
			padding: 20px 0px;
			font-size: 16px;
		}
</style>
